<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <UserHeader @updataMethode="updataMethode" @updataList="updataList">
          <template v-slot:right>
            <el-button
              style="float: right"
              @click="dialogFormVisible = true"
              size="small"
              icon="el-icon-edit"
              type="success" >新增权限组</el-button>
          </template>
        </UserHeader>
        <el-table
          :data="permissionList"
          style="width: 100%">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            prop="title"
            align="center"
            label="用户名">
          </el-table-column>
          <el-table-column
            sortable
            label="日期">
            <template v-slot="{row}">
              {{$dayjs(row.create_date).format('YYYY-MM-DD')}}
            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            width="120"
            label="操作">
            <template v-slot="{row}">
              <el-button @click="onEditPermission(row)" size="mini" class="Edit" icon="el-icon-edit" circle></el-button>
              <el-button @click="onDelPermission(row)" size="mini" class="Delete" icon="el-icon-delete" circle></el-button>
            </template>
          </el-table-column>
        </el-table>
        <PageTool
          :paginationPage="permissionForm.page"
          :paginationPagesize="permissionForm.pagesize"
          @pageChange="pageChange"
          @pageSizeChange="pageSizeChange"
          :total="total"></PageTool>
      </div>
    </el-card>
    <PermissionAdd ref="permissionAdd" :type="type" @updatePermission="getpermission" :dialogFormVisible.sync="dialogFormVisible"></PermissionAdd>
  </div>
</template>

<script>
import UserHeader from '../components/UserHeader'
import { list, remove } from '../../api/base/permissions'
import PermissionAdd from '../components/permissionAddData.vue'
import PageTool from '../components/page-tool.vue'
export default {
  data () {
    return {
      permissionList: [],
      permissionForm: {
        page: 1,
        pagesize: 5
      },
      dialogFormVisible: false,
      type: 1,
      total: ''
    }
  },

  created () {
    this.getpermission()
  },

  methods: {
    async getpermission () {
      const res = await list(this.permissionForm)
      this.total = res.data.counts
      this.permissionList = res.data.list
    },
    onDelPermission (row) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove(row)
        await this.getpermission()
        if (!this.permissionList.length) {
          this.permissionForm.page--
          await this.getpermission()
        }
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    onEditPermission (row) {
      this.type = 0
      this.dialogFormVisible = true
      this.$refs.permissionAdd.setPermissionList(row)
      // this.permissionList =
    },
    updataList (val) {
      this.permissionList = val
    },
    pageChange (val) {
      this.permissionForm.page = val
      this.getpermission()
    },
    pageSizeChange (val) {
      this.permissionForm.pagesize = val
      this.getpermission()
    },
    async updataMethode () {
      this.permissionForm.page = 1
      const res = await list(this.permissionForm)
      this.permissionList = res.data.list
    }
  },
  components: {
    UserHeader,
    PermissionAdd,
    PageTool
  }
}
</script>

<style scoped lang='less'>
.box-card {
  margin: 20px;
  .Edit{
    background: #ecf5ff;
    color: #409eff;
    border-color: #b3d8ff;
    &:hover{
      background: #409eff;
      color: #fff;
    }
  }
  .Delete {
    background: #fef0f0;
    color: #f56c6c;
    border-color: #fbc4c4;
    &:hover{
      background: #f56c6c;
      color: #fff;
    }
  }
}
</style>
